<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{:lang('充值头部标题')}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="__CSS__/mui.min.css">
    <link rel="stylesheet" href="__FONTS__/iconfont.css">
    <link rel="stylesheet" href="__CSS__/layerout.css">
    <style>
        .mui-grid-view.mui-grid-9 .mui-table-view-cell {
            padding: 11px 5px;
        }
    </style>
</head>
<body>
    {include file="public/foot" /}
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">{:lang('充值页面标题')}</h1>
    </header>
    <div class="mui-content">
        <div id="language" class="language">
            <a href="/wap/index/index?lang=zh-cn"  {eq name="lang" value="zh-cn"}class="active"{/eq} >中文版</a>
            <a  href="/wap/index/index?lang=en-us" {eq name="lang" value="en-us"}class="active"{/eq} >English</a>
        </div>
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mui-active" href="#item1mobile">Metfone</a>
            <a class="mui-control-item" href="#item2mobile">Cellcard</a>
            <a class="mui-control-item" href="#item3mobile">Smart</a>
        </div>
        <div class="mui-slider-group">
            {foreach $res as $k=>$v}
            <div id="item{$k+1}mobile" class="mui-slider-item mui-control-content {eq name='$k' value='0'} mui-active{/eq}">
                <div class="mui-input-group" style="margin-bottom: 10px;">
                    <div class="mui-input-row phoneInput">
                        <input id="phone_{$v.id}" type="number" checked class="mui-input-clear phone" placeholder="{:lang('请输入手机号')}"/>
                    </div>
                </div>
                <ul class="mui-table-view mui-grid-view mui-grid-9 choiceMoney">
                    {foreach $v['sublist'] as $vv}
                    <li class="mui-col-xs-4 mui-table-view-cell mui-pull-left mui-text-center i-checks">
                        <label>
                            {$vv->name}$<span style="font-size: 0.8rem!important" class="mui-block">{:lang('售价')}:{$vv->price}$</span>
                            <input type="radio" name="p_id" value="{$vv->id}" />
                            <i></i>
                        </label>
                    </li>
                    {/foreach}


                </ul>
                <div style="width: 93%; text-align: center; margin:20px auto 0 ">
                    <button id="but_{$k}" onclick="buy({$v.id});"  class="mui-btn mui-btn-block mui-btn-blue">{:lang('确认充值')}</button>
                </div>
                <div class="tipsInfo">
                    {:lang('提示1')}
                    <p> {:lang('提示2')}</p>
                    <p>{:lang('提示3')}</p>
                    <p>{:lang('提示4')}</p>
                    <p>{:lang('提示5')}</p>
                    <p>{:lang('提示6')}</p>
                </div>
            </div>
            {/foreach}

        </div>
    </div>
    <script src="__JS__/mui.min.js"></script>
    <script src="__JS__/jquery-3.1.1.min.js"></script>
    <script>
        mui("body").on('tap','a',function(){
            location.href=this.getAttribute('href');
        });
        function onBridgeReady(ret){
            WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":ret.appId,     //公众号名称，由商户传入
                        "timeStamp":ret.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr":ret.nonceStr, //随机串
                        "package":ret.package,
                        "signType":ret.signType,         //微信签名方式：
                        "paySign":ret.paySign //微信签名
                    },
                    function(res){
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            mui.toast("{:lang('支付成功')}");
                            $('.phone').val("");
                        }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                    }
            );
        }
        function buy(num){
           var  $phone=$('#phone_'+num).val();

            var pp=$("input[name='p_id']:checked").val();

            if($phone == ''){
                mui.toast("{:lang('请填写手机号')}");
                return false;
            }

            if(!(/^\d{3,15}$/.test($phone))){
                alert("{:lang('手机号码有误')}");
                return false;
            }
            if(pp == '' || pp == undefined){
                mui.toast("{:lang('请选择话费金额')}");
                return false;
            }

            $.getJSON('{:URL("wap/index/chongzhi")}',{p:pp,cate_id:num,phone:$phone},function (data) {
                if(data.code){
                    onBridgeReady(data.data);
                }else{
                    mui.toast(data.msg);
                }
            })
        }






    </script>
</body>
</html>